<template>
  <div class="container-body">
    <el-row :gutter="20">
      <el-col :span="24">
        <p-header></p-header>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" align="middle"
            class="form">
      <el-col :span="5" class="form-username">
        <el-input prefix-icon="icon-element-uizhanghao" v-model="username" placeholder="请输入登录账号"
                  class="font-color"></el-input>
      </el-col>
      <el-col :span="5" class="form-password">
        <el-input prefix-icon="icon-element-uimima" type="password" v-model="password" placeholder="请输入登录密码"
                  class="font-color"></el-input>
      </el-col>
      <el-col :span="5" class="form-button">
        <el-button type="primary" @click="login()" :loading="isLoading">{{loginText}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript">
import axios from "axios";
import qs from 'qs';
import Header from '../../components/common/header';
import {Button, Input, Row, Col, Tooltip} from 'element-ui';

/**
 * 登录界面
 */
export default {
  name: 'login',
  components: {
    pHeader: Header,
    elButton: Button,
    elInput: Input,
    elRow: Row,
    elCol: Col,
    elTooltip: Tooltip
  },
  data() {
    return {
      requestData: {
        login_name: null,
        login_password: null,
      },
      username: null, //用户名
      password: null, //密码
      isLoading: false,
      loginText: "登录",
    }
  },
  mounted() {
    sessionStorage.removeItem("historyParam");
    sessionStorage.removeItem("historyRadioName");
    sessionStorage.removeItem("requestData");
  },
  methods: {
    login() {
      var self = this;
      console.log("login()")
      console.log(`用户名:${self.username};\n密码:${self.password}`);
      var mess = null;
      if (!self.username) {
        mess = '请输入登录账号';
        self.$warnMessage(mess);
        return;
      } else if (!self.password) {
        mess = '请输入登录密码';
        self.$warnMessage(mess);
        return;
      }
      self.requestData.login_name = self.username;
      self.requestData.login_password = self.password;
      self.isLoading = true;
      self.loginText = "登录中";
      axios.post(self.$URLOBJ.LOGINURL, qs.stringify(self.requestData), { //qs.String(self.request) 结果:login_name=***&login_password=***
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
      }).then(res => {
        if (res.data.respcode == 0) {
          self.$router.push({
            path: '/setting',
          })
        } else {
          mess = `api返回的错误提示信息:${res.data.respmesg}`;
          console.log(mess);
          mess = `${res.data.respmesg}`;
          self.$errorMessage(mess);
        }
        self.isLoading = false;
        self.loginText = "登录";
      }, err => {
        mess = `网络请求异常:${err.message}`;
        self.isLoading = false;
        self.loginText = "登录"
        self.$errorMessage(mess);
      })
    }
  },
  destroyed: function () {
    var self = this;
    self.$closeMessage();
  }
}
</script>

<style>
  @import "./css/login.css";
</style>
